<div class="wp compbox">
    <div class="Zbox">
        <h2>组件列表</h2>
        <div class="comp-choice">
            <span class="label">选择组</span>
            <div id="compto" class="comp-dropdown" tabindex="1">
                <span>1111</span>
                <ul class="dropdown">
                    <li><a href="#"><i class="icon-user"></i>Profile</a></li>
                    <li><a href="#"><i class="icon-cog"></i>Settings</a></li>
                    <li><a href="#"><i class="icon-remove"></i>Log out</a></li>
                </ul>
                ​
            </div>
            <a href="javascript:;" class="add-comp Cbtn">添加组件</a>
        </div>

        <ul class="comp-item">
            <li class="clearfix">
                <div class="Cobox min">
                <span class="Cdesc">
                    css
                </span>
                    <div class="Cvers">
                        <span><a href="">版本号1.0.1</a><a href="javascript:;" class="Curl">获取地址</a></span>
                        <span><a href="">版本号1.2.1</a><a href="javascript:;" class="Curl">获取地址</a></span>
                        <span><a href="">版本号1.3.1</a><a href="javascript:;" class="Curl">获取地址</a></span>
                        <span><a href="">版本号1.4.1</a><a href="javascript:;" class="Curl">获取地址</a></span>
                    </div>
                </div>
                <div class="Cobox">
                    <a href="" class="Cname">
                        h5player-msite
                    </a>
                    <p>Slide-Banner 幻灯片BannerSlide-Banner 幻灯片BannerSlide-Banner 幻灯片BannerSlide-Banner
                        幻灯片BannerSlide-Banner
                        幻灯片BannerSlide-Banner 幻灯片Banner</p>
                    <p class="Ctime">最后更新：2018-11-12 <span>王志刚</span></p>

                    <div class="setti">
                        <a href="javascript:;" class="Cbtn edit">编辑</a>
                        <a href="javascript:;" class="Cbtn del">删除</a>
                        <a href="javascript:;" class="Cbtn">新增版本</a>
                        <a href="javascript:;" class="Cbtn">推送预览</a>
                        <a href="javascript:;" class="Cbtn">推送上线</a>
                    </div>
                </div>

            </li>
            <li class="clearfix">
                <div class="Cobox min">
                <span class="Cdesc">
                    html
                </span>
                    <div class="Cvers">
                        <span><a href="">版本号1.0.1</a><a href="javascript:;" class="Curl">获取地址</a></span>
                        <span><a href="">版本号1.2.1</a><a href="javascript:;" class="Curl">获取地址</a></span>
                        <span><a href="">版本号1.3.1</a><a href="javascript:;" class="Curl">获取地址</a></span>
                        <span><a href="">版本号1.4.1</a><a href="javascript:;" class="Curl">获取地址</a></span>
                    </div>
                </div>
                <div class="Cobox">
                    <a href="" class="Cname">
                        h5player-msite
                    </a>
                    <p>Slide-Banner 幻灯片BannerSlide-Banner 幻灯片BannerSlide-Banner 幻灯片BannerSlide-Banner
                        幻灯片BannerSlide-Banner
                        幻灯片BannerSlide-Banner 幻灯片Banner</p>
                    <p class="Ctime">最后更新：2018-11-12 <span>王志刚</span></p>

                    <div class="setti">
                        <a href="javascript:;" class="Cbtn edit">编辑</a>
                        <a href="javascript:;" class="Cbtn del">删除</a>
                        <a href="javascript:;" class="Cbtn">新增版本</a>
                        <a href="javascript:;" class="Cbtn">推送预览</a>
                        <a href="javascript:;" class="Cbtn">推送上线</a>
                    </div>
                </div>
            </li>
        </ul>

        {{> pager}}
    </div>


</div>

{{> edit}}

<div class="addboxs" style="display:none;">
    <div class="addbox forcomp">
        <form action="forcomp" method="post" enctype="multipart/form-data">
            {{> add}}
        </form>
    </div>
    <div class="addboxbg"></div>
</div>

{{> tips}}

{{#extend 'css'}}
    <link rel='stylesheet' href='/css/moudle/comp.css'/>
{{/extend}}

{{#extend 'jquery'}}
    <script type="text/javascript">
        function DropDown(el) {
            this.compto = el;
            this.placeholder = this.compto.children('span');
            this.opts = this.compto.find('ul.dropdown > li');
            this.val = '';
            this.initEvents();
        }

        DropDown.prototype = {
            initEvents: function () {
                let obj = this;
                obj.compto.on('click',
                        function () {
                            $(this).toggleClass('active');
                            return false;
                        });
                obj.opts.on('click',
                        function () {
                            let opt = $(this);
                            obj.val = opt.text();
                            obj.index = opt.index();
                            obj.placeholder.text(obj.val);
                        });
            },
        };

        $(function () {
            let compto = new DropDown($('#compto'));
            $(document).click(function () {
                $('.comp-dropdown').removeClass('active');
            });
        });

        $('.comp-choice .add-comp').click(function () {
            $('.addboxs').show();
        });

        $('.setti .edit').click(function () {
            $('.editbox').show();
        });

        $('.Cvers .Curl').click(function () {
            $('.tTipsbox').show();
        });

    </script>
{{/extend}}